<template>
  <view class="component-container">
    <view class="right">
      <image src="@/static/image/drawer/rider.jpg" class="avatar" />
      <span class="full-name">{{ riderBasicInfo.fullName }}</span>
      <uni-icons type="right" size="12" color="black"></uni-icons>
    </view>
  </view>
</template>

<script setup lang="ts">
import $store from '@/store'

const riderBasicInfo = $store.user.info
</script>

<style scoped lang="scss">
.component-container {
  $component-height: 60px;

  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: $component-height;

  .right {
    display: flex;
    align-items: center;

    .avatar {
      $avatar-size: $component-height * 0.7;

      margin-right: 10px;
      width: $avatar-size;
      height: $avatar-size;
      border-radius: 50%;
    }

    .full-name {
      font-size: 16px;
      font-weight: 700;
    }
  }
}
</style>
